"use client"
import React, { useMemo, useState } from 'react';
import { Geist, Geist_Mono } from "next/font/google";
import Mbx from '../../../component/mbx'; // 确保路径正确

import {
  BookOutlined,
  UserOutlined,
  VideoCameraOutlined,  OrderedListOutlined 
} from '@ant-design/icons';
import { Button, Layout, Menu, theme, Flex, Tooltip, Breadcrumb } from 'antd';
import { useRouter } from 'next/navigation';
const { Header, Sider, Content } = Layout;
const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});



const Home = ({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) => {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  const router = useRouter()

  const buttonWidth = 80;
  const text = <div>
    <p onClick={() => {
      router.push("/")
    }}>退出登录</p>
  </div>;

  const routes = [
    {
      key: '/liyi',
      label: '客户列表',
    },
    {
      key: '/liyi/kehuguanli/gonghaikehu',
      label: '公海客户',
    },
    {
      key: '/liyi/kehuguanli/lajikehu',
      label: '垃圾客户',
    },
    {
      key: '/liyi/kehuguanli/kehushaixuan',
      label: '客户筛选',
    },
    {
      key: '/liyi/kehuguanli/xiaoshouxiansuo',
      label: '销售线索',
    },
    {
      key: '/liyi/kehuguanli/gonggongxiaosuo',
      label: '公共线索',
    },
    {
      key: '/liyi/kehuguanli/lianxirenliebiao',
      label: '联系人列表',
    },
    {
      key: '/liyi/kehuguanli/genjinjilu',
      label: '跟进记录',
    },
  ]
  return (<html lang="en">

    <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
      <Layout style={{ height: "100vh" }}>
        <Sider style={{ background: "#435188" }} collapsed={true}>
          <div className="demo-logo-vertical" />
          <Menu
            theme="dark"
            mode="inline"
            style={{ background: "#435188" }}
            defaultSelectedKeys={['/liyi']}
            onSelect={(i) => {
              router.push(i.key)
          }}
          items={[
            {
              key: "/fff",
              icon: <  OrderedListOutlined  />,
              label: '订单管理',
            },
            {
              key: "/liyi",
              icon: <UserOutlined />,
              label: '系统管理',
            },
            {
              key: "/lxt",
              icon: <BookOutlined />,
              label: '商机管理',
            },
            {
              key: "/little_jia",
              icon: <UserOutlined />,
              label: '账本管理',
            }
          ]}
        />
      </Sider>

      <Sider width="150px"  style={{background:"skyblue"}}>
        <div className="demo-logo-vertical"/>
        客户管理
        <Menu
        style={{background:"skyblue"}}
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['/liyi']}
          onSelect={(i)=>{
            router.push(i.key)
        }}
          items={routes}
        />
      </Sider>

      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }}>
          {/* 顶部 */}
          <Mbx routes={routes}/>
          
          <Flex style={{ width: buttonWidth * 5 + 32 }} justify="space-between" align="center">
          <Flex align="center" vertical>
            <Tooltip placement="bottomLeft" title={text} >
              <Button style={{position:"absolute", right:"10px", top:"10px"}}>用户管理</Button>
            </Tooltip>
          </Flex>
          </Flex>
          <Breadcrumb />
        </Header>
        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
          }}
        >
          {children}
        </Content>

        </Layout>
      </Layout>
    </body>
  </html>
  );
};

export default Home;